fix(ts): use type-only imports in TS variants (fixes TS1484 in stock Vite react-ts apps) - #1018
fix(ts): use type-only imports in TS variants (fixes TS1484 in stock Vite react-ts apps)#1018noron12234 wants to merge 1 commit into
Conversation
|
Follow-up: I understated the impact in the description. For at least one component this is not a
Production build, stock Vite React-TS app, $ npx vite build
error during build:
Build failed with 1 error:
[MISSING_EXPORT] "WebGLRendererParameters" is not exported by "node_modules/three/build/three.module.js".
4 │ import { ACESFilmicToneMapping, ..., WebGLRenderer, WebGLRendererParameters } from "three";
│ ╰───────────── Missing exportDev server, same app, measured with Playwright:
So Why this one and not Nothing changes in the diff; the |
There was a problem hiding this comment.
Pull request overview
This pull request fixes TypeScript build errors (TS1484) in the TypeScript component variants by converting type-only named imports (from react, motion/react, three, and @react-three/fiber) into explicit type imports using the inline type modifier, aligning with verbatimModuleSyntax defaults in stock Vite React-TS projects.
Changes:
- Updated TS variant files to use
type-only import specifiers for bindings that are types (e.g.Transition,Variants,RootState,IUniform,JSX, etc.). - Applied the same mechanical import fix consistently across both TS variants (
ts-defaultandts-tailwind), with only formatting rewraps where needed.
Reviewed changes
Copilot reviewed 83 out of 83 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| src/ts-tailwind/TextAnimations/VariableProximity/VariableProximity.tsx | Converts React type imports to inline type specifiers. |
| src/ts-tailwind/TextAnimations/TextType/TextType.tsx | Marks ElementType as type-only in React import. |
| src/ts-tailwind/TextAnimations/Shuffle/Shuffle.tsx | Marks JSX as type-only in React import. |
| src/ts-tailwind/TextAnimations/ScrollReveal/ScrollReveal.tsx | Marks ReactNode/RefObject as type-only in React import. |
| src/ts-tailwind/TextAnimations/ScrollFloat/ScrollFloat.tsx | Marks ReactNode/RefObject as type-only in React import. |
| src/ts-tailwind/TextAnimations/RotatingText/RotatingText.tsx | Marks Transition as type-only in motion/react import. |
| src/ts-tailwind/TextAnimations/GradientText/GradientText.tsx | Marks ReactNode as type-only in React import. |
| src/ts-tailwind/TextAnimations/GlitchText/GlitchText.tsx | Marks FC/CSSProperties as type-only in React import. |
| src/ts-tailwind/TextAnimations/CurvedLoop/CurvedLoop.tsx | Marks FC/PointerEvent as type-only in React import. |
| src/ts-tailwind/TextAnimations/CircularText/CircularText.tsx | Marks Transition as type-only in motion/react import. |
| src/ts-tailwind/TextAnimations/BlurText/BlurText.tsx | Marks Transition/Easing as type-only in motion/react import. |
| src/ts-tailwind/Components/Stepper/Stepper.tsx | Marks React and Motion type imports as type-only. |
| src/ts-tailwind/Components/SpecularButton/SpecularButton.tsx | Marks React DOM/types imports as type-only. |
| src/ts-tailwind/Components/PixelCard/PixelCard.tsx | Marks JSX as type-only in React import. |
| src/ts-tailwind/Components/OptionWheel/OptionWheel.tsx | Marks CSSProperties as type-only in React import. |
| src/ts-tailwind/Components/ModelViewer/ModelViewer.tsx | Marks FC as type-only in React import. |
| src/ts-tailwind/Components/LineSidebar/LineSidebar.tsx | Marks CSSProperties as type-only in React import. |
| src/ts-tailwind/Components/InfiniteMenu/InfiniteMenu.tsx | Marks FC/MutableRefObject as type-only in React import. |
| src/ts-tailwind/Components/FluidGlass/FluidGlass.tsx | Marks ReactNode/ThreeElements as type-only imports. |
| src/ts-tailwind/Components/DecayCard/DecayCard.tsx | Marks ReactNode as type-only in React import. |
| src/ts-tailwind/Components/Carousel/Carousel.tsx | Marks PanInfo/JSX as type-only imports. |
| src/ts-tailwind/Components/CardSwap/CardSwap.tsx | Marks ReactElement/ReactNode/RefObject as type-only imports. |
| src/ts-tailwind/Components/AnimatedList/AnimatedList.tsx | Marks React event/node types as type-only imports. |
| src/ts-tailwind/Backgrounds/Waves/Waves.tsx | Marks CSSProperties as type-only in React import. |
| src/ts-tailwind/Backgrounds/Silk/Silk.tsx | Marks RootState/IUniform as type-only imports. |
| src/ts-tailwind/Backgrounds/Hyperspeed/Hyperspeed.tsx | Marks FC as type-only in React import. |
| src/ts-tailwind/Backgrounds/GridMotion/GridMotion.tsx | Marks FC/ReactNode as type-only in React import. |
| src/ts-tailwind/Backgrounds/Dither/Dither.tsx | Marks ThreeEvent as type-only in @react-three/fiber import. |
| src/ts-tailwind/Backgrounds/Beams/Beams.tsx | Marks FC/ReactNode as type-only in React import. |
| src/ts-tailwind/Backgrounds/Ballpit/Ballpit.tsx | Marks WebGLRendererParameters as type-only in three import. |
| src/ts-tailwind/Animations/Strands/Strands.tsx | Marks CSSProperties as type-only in React import. |
| src/ts-tailwind/Animations/StickerPeel/StickerPeel.tsx | Marks CSSProperties as type-only in React import. |
| src/ts-tailwind/Animations/ShapeBlur/ShapeBlur.tsx | Marks FC as type-only in React import. |
| src/ts-tailwind/Animations/PixelTransition/PixelTransition.tsx | Marks CSSProperties as type-only in React import. |
| src/ts-tailwind/Animations/PixelTrail/PixelTrail.tsx | Marks CanvasProps/ThreeEvent as type-only in @react-three/fiber import. |
| src/ts-tailwind/Animations/OrbitImages/OrbitImages.tsx | Marks ReactNode as type-only in React import. |
| src/ts-tailwind/Animations/MagnetLines/MagnetLines.tsx | Marks CSSProperties as type-only in React import. |
| src/ts-tailwind/Animations/Magnet/Magnet.tsx | Marks ReactNode/HTMLAttributes as type-only in React import. |
| src/ts-tailwind/Animations/ImageTrail/ImageTrail.tsx | Marks JSX as type-only in React import. |
| src/ts-tailwind/Animations/GradualBlur/GradualBlur.tsx | Marks CSSProperties/PropsWithChildren as type-only in React import. |
| src/ts-tailwind/Animations/ElectricBorder/ElectricBorder.tsx | Marks CSSProperties/ReactNode as type-only in React import. |
| src/ts-tailwind/Animations/Crosshair/Crosshair.tsx | Marks RefObject as type-only in React import. |
| src/ts-default/TextAnimations/VariableProximity/VariableProximity.tsx | Converts React type imports to inline type specifiers. |
| src/ts-default/TextAnimations/TrueFocus/TrueFocus.tsx | Marks RefObject as type-only in React import. |
| src/ts-default/TextAnimations/TextType/TextType.tsx | Marks ElementType as type-only in React import. |
| src/ts-default/TextAnimations/ScrollReveal/ScrollReveal.tsx | Marks ReactNode/RefObject as type-only in React import. |
| src/ts-default/TextAnimations/ScrollFloat/ScrollFloat.tsx | Marks ReactNode/RefObject as type-only in React import. |
| src/ts-default/TextAnimations/RotatingText/RotatingText.tsx | Marks Transition as type-only in motion/react import. |
| src/ts-default/TextAnimations/GradientText/GradientText.tsx | Marks ReactNode as type-only in React import. |
| src/ts-default/TextAnimations/GlitchText/GlitchText.tsx | Marks FC/CSSProperties as type-only in React import. |
| src/ts-default/TextAnimations/CurvedLoop/CurvedLoop.tsx | Marks FC/PointerEvent as type-only in React import. |
| src/ts-default/TextAnimations/CircularText/CircularText.tsx | Marks Transition as type-only in motion/react import. |
| src/ts-default/TextAnimations/BlurText/BlurText.tsx | Marks Transition as type-only in motion/react import. |
| src/ts-default/Components/Stepper/Stepper.tsx | Marks React/Motion type imports as type-only. |
| src/ts-default/Components/SpecularButton/SpecularButton.tsx | Marks React DOM/types imports as type-only. |
| src/ts-default/Components/PixelCard/PixelCard.tsx | Marks JSX as type-only in React import. |
| src/ts-default/Components/OptionWheel/OptionWheel.tsx | Marks CSSProperties as type-only in React import. |
| src/ts-default/Components/ModelViewer/ModelViewer.tsx | Marks FC as type-only in React import. |
| src/ts-default/Components/LineSidebar/LineSidebar.tsx | Marks CSSProperties as type-only in React import. |
| src/ts-default/Components/InfiniteMenu/InfiniteMenu.tsx | Marks FC/MutableRefObject as type-only in React import. |
| src/ts-default/Components/FluidGlass/FluidGlass.tsx | Marks ReactNode/ThreeElements as type-only imports. |
| src/ts-default/Components/DecayCard/DecayCard.tsx | Marks ReactNode as type-only in React import. |
| src/ts-default/Components/Carousel/Carousel.tsx | Marks PanInfo as type-only in motion/react import. |
| src/ts-default/Components/CardSwap/CardSwap.tsx | Marks ReactElement/ReactNode/RefObject as type-only imports. |
| src/ts-default/Components/AnimatedList/AnimatedList.tsx | Marks React event/node types as type-only imports. |
| src/ts-default/Backgrounds/Waves/Waves.tsx | Marks CSSProperties as type-only in React import. |
| src/ts-default/Backgrounds/Silk/Silk.tsx | Marks RootState/IUniform as type-only imports. |
| src/ts-default/Backgrounds/Hyperspeed/Hyperspeed.tsx | Marks FC as type-only in React import. |
| src/ts-default/Backgrounds/GridMotion/GridMotion.tsx | Marks FC/ReactNode as type-only in React import. |
| src/ts-default/Backgrounds/Dither/Dither.tsx | Marks ThreeEvent as type-only in @react-three/fiber import. |
| src/ts-default/Backgrounds/Beams/Beams.tsx | Marks FC/ReactNode as type-only in React import. |
| src/ts-default/Backgrounds/Ballpit/Ballpit.tsx | Marks WebGLRendererParameters as type-only in three import. |
| src/ts-default/Animations/Strands/Strands.tsx | Marks CSSProperties as type-only in React import. |
| src/ts-default/Animations/StickerPeel/StickerPeel.tsx | Marks CSSProperties as type-only in React import. |
| src/ts-default/Animations/PixelTransition/PixelTransition.tsx | Marks CSSProperties as type-only in React import. |
| src/ts-default/Animations/PixelTrail/PixelTrail.tsx | Marks CanvasProps/ThreeEvent as type-only in @react-three/fiber import. |
| src/ts-default/Animations/OrbitImages/OrbitImages.tsx | Marks ReactNode as type-only in React import. |
| src/ts-default/Animations/MagnetLines/MagnetLines.tsx | Marks CSSProperties as type-only in React import. |
| src/ts-default/Animations/Magnet/Magnet.tsx | Marks ReactNode/HTMLAttributes as type-only in React import. |
| src/ts-default/Animations/ImageTrail/ImageTrail.tsx | Marks JSX as type-only in React import. |
| src/ts-default/Animations/GradualBlur/GradualBlur.tsx | Marks CSSProperties/PropsWithChildren as type-only in React import. |
| src/ts-default/Animations/ElectricBorder/ElectricBorder.tsx | Marks CSSProperties/ReactNode as type-only in React import. |
| src/ts-default/Animations/Crosshair/Crosshair.tsx | Marks RefObject as type-only in React import. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
Pushed
Regenerated with |
45a3229 to
9ff31a2
Compare
The TS-CSS and TS-TW variants shipped through the registry import type-only bindings (ReactNode, FC, CSSProperties, Transition, IUniform, RootState, ThreeEvent, ...) as value imports. TypeScript's own `--template react-ts` scaffold enables `verbatimModuleSyntax`, so every one of these is a hard TS1484 compile error the moment someone installs a TS variant into a stock Vite app. Adds the inline `type` modifier at 132 specifiers across 83 files, matching the style already used elsewhere in the same imports (e.g. RotatingText already writes `type VariantLabels`). No runtime or type semantics change.
9ff31a2 to
cb8bde6
Compare
|
Slimmed this down and rewrote the description with a reproduction. Two things changed since you last would have seen it:
Worth calling out explicitly: this repo's own Happy to split it per-category if a single 83-file diff is awkward to review. |
The problem
React Bits components are meant to be copied into a consumer's project. A stock
npm create vite@latest -- --template react-tsproject shipsverbatimModuleSyntax: true, and under that flag every TS variant that importsa type through a value import fails to compile.
Reproduction, against
mainas it is today:With this branch, the same check exits 0.
Why CI is green on
maineven though this is brokenThis repo's own
tsconfig.jsonsetsisolatedModulesbut notverbatimModuleSyntax, sotschere never raises TS1484. The breakage onlyappears downstream, in the consumer project — which is the only place these
files are ever compiled. That is why there is no failing test to point at.
If you would rather catch this in CI going forward, adding
"verbatimModuleSyntax": truetotsconfig.jsonwould do it. I left that outof this PR deliberately since it changes your build config.
What this changes
83
.tsxfiles, mechanically: type-only specifiers (type Foo) for importsthat are types.
+126 / -94. No runtime change —verbatimModuleSyntaxgoverns emit of import statements only.
Generated
public/r/**artifacts are not included;npm run buildrunsregistry:buildand regenerates them.Precedent: magicui merged the identical fix for the same root cause in
magicuidesign/magicui#993.
Reviewing this
The diff is wide but shallow — one line per file in most cases. The mechanical
check is that every added
typekeyword sits in front of an identifier that isonly ever used in a type position.